import React from 'react';
import { inject } from 'mobx-react';
import { observer } from "mobx-react/index";
import UploadPhoto from '@/components/common/Upload';
import Card from '@/components/common/Card';
import Message from '@/components/common/Message';
import NoRepaired from './components/noRepaired';
import HadRepaired from './components/hadRepaired';
import { Tabs, Select } from 'antd';
import style from './style.less';

console.log( NoRepaired );
const TabPane = Tabs.TabPane;

@inject( 'state', 'actions' )
@observer
class Collect extends React.Component {

    constructor() {
        super();
    }

    submitFn = ( value ) => {
        this.getData();
    }

    getData = () => {
        this.props.actions.getSipCollect( '0' );
    }

    handleTabChange = ( key ) => {
        let name = '';
        switch ( key ) {
            case '0':
                name = 'noRepairedData';
                break;
            case '1':
                name = 'hadRepairedData';
                break;
            case '2':
                name = 'pointData';
                break;
        }
        if ( this.props.state[ name ].length == 0 ) {
            this.props.actions.getSipCollect( key );
        }

    }

    render() {
        console.log( 'collect' )
        const { state, actions } = this.props;
        return (
            <div>
                <Card className={style.collectInfo} title='SIP站点数据采集'>
                    <UploadPhoto submitFn={this.submitFn}></UploadPhoto>
                </Card>

                <Card title='基本信息'>
                    <Message formData={state.sipVehicle}></Message>
                </Card>

                <Card title='缺陷列表'>
                    <Tabs tabPosition='top' onChange={this.handleTabChange}>
                        <TabPane tab="未修复" key="0">
                            <NoRepaired dataConfig={state.noRepairedData}></NoRepaired>
                        </TabPane>
                        <TabPane tab="已修复" key="1">
                            <HadRepaired dataConfig={state.hadRepairedData}></HadRepaired>
                        </TabPane>
                        <TabPane tab="过点记录" key="2">Content of Tab 3</TabPane>
                    </Tabs>
                </Card>
            </div>
        )
    }

}

export default Collect;